<!DOCTYPE html>
<html lang="en">
    <head>
        {include file="public/header" /}
    </head>
    <body>
        <div class="container">
            <div class="col-sm-12">
                <div class="paper" id="paper">
                    <div class="page-header">
                        <h2 class="text-center">{$paper.pap_name}</h2>
                    </div>
                    <div class="paper-time">
                    </div>
                    <form class="form" id="form">
                        <input type="hidden" name="papid" value="{$paper.pap_id}">
                        <?php $sort = ['A','B','C','D','E']; ?>
                        <?php foreach($choice as $key=>$value) { ?>
                        <div class="exam-content">
                            
                            <div class="col-sm-12">
                                <div class="exam-title"><?php echo $key+1, '. ', $value['ch_title']; ?></div>
                            </div>

                                <div class="exam-option">

                                    <?php foreach($value['ch_options'] as $k=>$val){ ?>
                                    <div class="col-sm-12">
                                        
                                        <div class="char"><input type="checkbox" name="answer[]" value="<?php echo $value['ch_id'],'-',$k; ?>">
                                            <span><?php echo $sort[$k],':'?></span>
                                        </div>
                                        <div class="option"><?php echo $val; ?></div>
                                    </div>
                                    
                                <?php } ?>

                            </div>
                            <div class="clearfix"></div>
                            <div class="" id="alert-<?php echo $value['ch_id']; ?>" style="display:none">
                                <div id="alert-answer-<?php echo $value['ch_id']; ?>"></div><div class="alert-result-<?php echo $value['ch_id']; ?>"></div>
                            </div>
                        </div>
                        <hr />
                        <?php } ?>
                        <div class="exam-content">

                        </div>
                    </form>
                    <div class="btn btn-primary" id="submit">提交</div>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="modal" style="display:block">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示！</h4>
                    </div>
                    <div class="modal-body">
                        这个考试试卷所要时间为{$paper.pap_time}分钟，如果你准备好了，点击确定后，马上开始。
                        1：考试过程中，你可以翻书，可以可以翻手册，但是不能利用搜索引擎。
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="modal fade" tabindex="-1" role="dialog" id="modal2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示！</h4>
                    </div>
                    <div class="modal-body">
                        对不起，你没有在规定时间内完成。
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->        
        {include file="public/js" /}
        <script type="text/javascript">

         var modal = $("#modal");
         var modal_body = modal.find(".modal-body");
         var alert_answer = $(".alert-answer");
         var sort = ['A','B','C','C','E'];
         $("#submit").on('click',function(){
             $.ajax({
                 url : "answer.html",
                 type:"post",
                 dataType : "json",
                 data: $("#form").serialize(),
                 success : function(res){
                     answer = res.data.answer;
                     result = res.data.result;
                     for(i in answer){
                         var tmp = '';
                         
                         for(j in answer[i]){
                             tmp += sort[answer[i][j]];
                             console.log(answer[i][j]);
                         }
                         $("#alert-answer-"+i).text('正确答案：'+tmp);
                     }

                     for(i in result){
                         $("#alert-"+i).show();
                         if(result[i] == false){
                             $("#alert-"+i).addClass('alert alert-warning');
                         } else {
                             $("#alert-"+i).addClass('alert alert-success');
                         }
                     }

                     $("#submit").remove();
                     /*                      console.log(res) */
                 }
             });
             
         });
        </script>
        <script type="text/javascript">
         var time = {$paper.pap_time}*60000;
         window.onload = function(){
             var begin = function(){
                 $("#submit").remove();
                 window.clearInterval(window.end);
                 $("#modal2").modal('show').on('hidden.bs.modal',function(e){
                     $("#paper").remove();
                     
                 });
             }
             $("#modal").modal('show').on('hidden.bs.modal',function(e){
                 window.end = window.setInterval(begin,time);
             });

         }
        </script>
    </body>
</html>
